{extend name="layout/layout_simple" /}
{block name="content"}
<!--<div class="card m-b0">-->
    <div style="padding:30px">

        {notempty name="info"}
        <p class="text-info" style="margin: 10px 0; padding: 5px; text-align: right;">{$info}</p>
        {/notempty}

        <form class="form-horizontal">
            {:token()}
            {volist name="data" id="item"}
            <div {neq name="item.type" value="hidden"}class='form-group row' {else/} style='height:1px;overflow:hidden;' {/neq}>
                <label class=" col-xs-5 col-md-2 col-form-label" for="{$item.name}" style="text-align: right">
                    {$item.verify ?= '<span class="text-danger">*</span>' }
                    {$item.label}
                </label>
                <div class="col-xs-7 col-md-9">
                    {switch name="item.type" }

                    {case value="checkbox"}
                    <div class="form-group">
                        {volist name="item.options" id="o"}
                        <label class="m-t-10" style="min-width: 100px;">
                            <input type="checkbox" name="{$item.name}[]" value="{$key}" class="minimal"

                                   {in name="key" value="$item.value" }
                                   checked="checked" checked
                                   {/in}
                            >
                            {$o}
                        </label>
                        {/volist}
                    </div>
                    {/case}

                    {case value="radio"}
                    {volist name="item.options" id="o"}

                    <label class="m-t-10" style="min-width: 100px;">
                        <input type="radio" name="{$item.name}" value="{$key}" class="minimal"
                               {if condition="$o === $item.value || $key === $item.value" }
                               checked
                               {/if}
                        >
                        {$o}
                    </label>

                    {/volist}
                    {/case}

                    {case value="select"}
                    <select name="{$item.name}" lay-verify="{$item.verify ?? ''}" class="form-control select2">
                        {volist name="item.options" id="o"}
                        <option value="{$key}" {eq name="item.value" value="$key" }selected{/eq}>{$o}</option>
                        {/volist}
                    </select>
                    {/case}

                    {case value="region"}
                    <select name="{$item.name}[]" style="width:25%; display: inline-block; margin-right:10px;" class="form-control select2 region-picker" data-func="{$item.func ?? ''}">
                        {volist name="item.options" id="o"}
                        <option value="{$key}">{$o}</option>
                        {/volist}
                    </select>
                    <select name="{$item.name}[]" style="width:25%; display: inline-block; margin-right:10px;" class="form-control select2 region-picker" data-func="{$item.func ?? ''}">
                        <option value="">请选择</option>
                    </select>
                    <select name="{$item.name}[]" style="width:25%; display: inline-block; margin-right:10px;" class="form-control select2">
                        <option value="">请选择</option>
                    </select>
                    {/case}

                    {case value="textarea"}
                    <textarea name="{$item.name}" class="form-control" lay-verify="{$item.verify ?? ''}" rows="6">{$item.value}</textarea>
                    {/case}

                    {case value="editor"}
                    <textarea name="{$item.name}" id="editor">{$item.value}</textarea>
                    {/case}

                    {case value="password"}
                    {empty name="item.value"}
                    <input type="text" id="{$item.name}" name="{$item.name}" lay-verify="{$item.verify ?? ''}"
                           class="form-control" value="{$item.value}"/>
                    {else/}
                    <div>******</div>
                    {/empty}
                    {/case}
                    {case value="image"}
                    <ul id="{$item.name}" class="icons-item img-uploader" >
                        {notempty name="item.value"}
                        <li class="append-img" ><img src="{$item.value}" style="width: 50px; height:50px;margin-top: -5px;"/>
                            <input type="hidden" name="{$item.name}[]" value="{$item.value}">
                        </li>
                        {/notempty}
                        <li id="{$item.name}_btn" data-toggle="tooltip" title="添加" onclick="popupPage('设置单图', '{:url('attachment/index',['dom_id'=>$item['name'],'type'=>'single'])}',900, 600) "><i class="fa fa-image"></i></li>
                    </ul>
                    {/case}
                    {case value="multimage"}
                    <ul id="{$item.name}" class="icons-item img-uploader" >
                        {volist name="item.value" id='img'}
                        <li class="append-img" ><img src="{$img}" style="width: 50px; height:50px;margin-top: -5px;"/>
                            <input type="hidden" name="{$item.name}[]" value="{$img}">
                        </li>
                        {/volist}
                        <li id="{$item.name}_btn" data-toggle="tooltip" title="添加" onclick="popupPage('设置多图', '{:url('attachment/index',['dom_id'=>$item['name']])}',900, 600) "><i class="fa fa-image"></i></li>
                    </ul>
                    {/case}
                    {case value="date"}
                    <input type="date" id="{$item.name}" name="{$item.name}" lay-verify="{$item.verify ?? ''}"
                           autocomplete="off" class="form-control date-picker" value="{$item.value}"/>
                    {/case}
                    {case value="datetime"}
                    <input type="text" id="{$item.name}" name="{$item.name}" lay-verify="{$item.verify ?? ''}"
                           autocomplete="off" class="form-control selector-datetime" value="{$item.value}"/>
                    {/case}
                    {case value="hidden"}
                    <input type="hidden" name="{$item.name}" value="{$item.value}"/>
                    {/case}
                    {case value="number"}
                    <input type="number" name="{$item.name}" value="{$item.value}" class="form-control"/>
                    {/case}

                    {default /}
                    <input type="text" id="{$item.name}" name="{$item.name}" lay-verify="{$item.verify ?? ''}"
                           autocomplete="off" value="{$item.value}" class="form-control"/>
                    {/switch}
                    <small>
                        {$item.info ?? ''}
                    </small>
                </div>
            </div>
            {/volist}
            <div style="text-align: center">
                <button type="button" onclick="doSubmit('form')" class="btn btn-primary mt-1 mb-0">提 交</button>
            </div>
        </form>
    </div>
<!--</div>-->
{/block}
{block name="script"}
{load href="__STATIC__/js/editor.js"/}
<script>
    "use strict";
    $(function () {
        // $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
        //     checkboxClass: 'icheckbox_minimal-purple',
        //     radioClass: 'iradio_minimal-purple'
        // });

        $('.img-uploader').on('click','.append-img', function(){
            $(this).remove();
        })

        $('.region-picker').change(function(){
            var $this = $(this);
            var url = $this.data('func');
            var pid = $this.val();
            if(url) {
                $.get(url, {pid: pid}, function(res){
                    $this.next().empty();
                    $.each(res, function(i,item) {
                        $this.next().append('<option value="' + item.id + '">' + item.name + '</option>')
                    })
                })
            }
           console.log($(this).data('func'))
        });
    });

    var editorObj;
    // 自定义编辑器按钮
    function divEditorBtnFunc(editor){
      // console.log('editoreditor',editor)
      // editor.insertContent('&nbsp;<b>It\'s my editoreditor!!!</b>&nbsp;')
      editorObj = editor;
      popupPage('设置单图', "{:url('attachment/index',['dom_id'=>$item['name'],'type'=>'editor'])}",900, 600)
    }

    // 处理图片选择器返回的结果
    function handleSelctedImg(id, image_path, type) {
        // var oldL = $('#'+id).find('.append-img').length;
        // var newL = image_path.length;
        // if(oldL + newL > 6) {
        //     layer.msg('您最多可以传6张图')
        //     return;
        // }
      if(type == 'editor') {
        // randerImgs(id, image_path);
        // var oldV = tinymce.activeEditor.getContent();
        // var newV = '';
        // if(image_path.length > 0) {
        //     newV += "<p style='color:red;'>这只是个editor</p>";
        // }
        // tinymce.activeEditor.setContent(oldV + newV);

        var content = '';
        for(var img of image_path ){
          content += '<img src="'+ img +'" style="width: 100%;"/>';
        }
        editorObj.insertContent(content)
      } else {
        if(image_path.length > 0) {
          randerImgs(id, image_path);
        }
      }

    }
    function randerImgs(id, images){
        for(var i=0 ; i< images.length; i++){
            // if(i == 5){
            //     $('#' + id + '_btn').hide();
            // }
            if(i < 5) {
                $('#' + id).prepend('<li class="append-img" ><img src="'+images[i]+'" style="width: 50px; height:50px;margin-top: -5px;"/>' +
                    '<input type="hidden" name="'+id+'[]" value="'+images[i]+'"></li>')
            } else{
                return;
            }
        }
    }
    // 表单提交
    function doSubmit(form_selecter) {
      if(tinyMCE) {
        tinyMCE.triggerSave(); // 解决编辑器获取不到内容
      }
        ajaxRequest('{$action}', $(form_selecter).serialize(), function (res) {
            layer.msg(res.msg, {icon: 1, time: 1000}, function (res) {
                var index = parent.layer.getFrameIndex(window.name);
                layer.close(index);
                parent.location.reload();
            });
        }, 'POST');
    }
</script>


{/block}